/**
* @Description: 客户管理详情
* @author  qgj
* @date 
*/
<template>
  <div class="app-container">
    <div style="padding:20px">
        <div style="margin-bottom:16px">
            <span style="display:inline-block; background-color: #1890FF;margin-bottom: -2px; margin-right: 8px; width: 3px; height: 14px"></span>
            <span class="top_title">客户详情</span>
        </div>
        <el-descriptions class="margin-top" :column="3" border>
            <el-descriptions-item labelStyle="width: 150px" contentStyle="width: 250px" label="ERP客户编号">{{customerDetail.code}}</el-descriptions-item>
            <el-descriptions-item labelStyle="width: 150px" contentStyle="width: 250px" label="客户名称">{{customerDetail.name}}</el-descriptions-item>
            <el-descriptions-item labelStyle="width: 150px" contentStyle="width: 250px" label="客户分类">{{getCustomerType(customerDetail.type)}}</el-descriptions-item>
            <el-descriptions-item label="ERP使用状态">{{customerDetail.erpStatus == '00'?'可用':customerDetail.erpStatus == '01'?'禁用':'反审核中'}}</el-descriptions-item>
            <el-descriptions-item label="统一社会信用代码">{{customerDetail.creditCode}}</el-descriptions-item>
            <el-descriptions-item label="电子邮箱">{{customerDetail.email}}</el-descriptions-item>
            <el-descriptions-item label="行政区划">{{customerDetail.divisionName}}</el-descriptions-item>
            <el-descriptions-item label="联系人">{{customerDetail.contactName}}</el-descriptions-item>
            <el-descriptions-item label="联系电话">{{customerDetail.contactMobile}}</el-descriptions-item>
            <el-descriptions-item label="详细地址">{{customerDetail.address}}</el-descriptions-item>
            <el-descriptions-item label=""></el-descriptions-item>
            <el-descriptions-item label=""></el-descriptions-item>
        </el-descriptions>
        <div style="margin:16px 0 ">
            <span style="display:inline-block; background-color: #1890FF;margin-bottom: -2px; margin-right: 8px; width: 3px; height: 14px"></span>
            <span class="top_title">开票信息</span>
        </div>
        <el-descriptions class="margin-top" :column="3" border>
            <el-descriptions-item  labelStyle="width: 150px" contentStyle="width: 250px" label="开户行">{{customerDetail.bank}}</el-descriptions-item>
            <el-descriptions-item  labelStyle="width: 150px" contentStyle="width: 250px" label="开户行账号">{{customerDetail.account}}</el-descriptions-item>
            <el-descriptions-item  labelStyle="width: 150px" contentStyle="width: 250px" label=""></el-descriptions-item>
        </el-descriptions>
        <div style="width:100%;height:20px"></div>
        <el-descriptions class="margin-top" :column="3" border>
            <el-descriptions-item labelStyle="width: 150px" contentStyle="width: 250px" label="客户状态">
                {{customerDetail.status == 'UN_CONFIRMED'?'待确认':customerDetail.status == 'VALID'?'生效':'失效'}}</el-descriptions-item>
            <el-descriptions-item labelStyle="width: 150px" contentStyle="width: 250px" label="结算方式">
                {{customerDetail.settlement == 'CURRENT_SETTLEMENT'?'现结':'月结'}}</el-descriptions-item>
            <el-descriptions-item labelStyle="width: 150px" contentStyle="width: 250px" label="授权协议号">{{customerDetail.licenseAgreementNumber}}</el-descriptions-item>
            <!-- <el-descriptions-item label="是否支持铺货">{{customerDetail.supportedDistribution=='true'?'是':'否'}}</el-descriptions-item>
            <el-descriptions-item label="是否支持采购">{{customerDetail.supportedBuyout=='true'?'是':'否'}}</el-descriptions-item> -->
            <el-descriptions-item label="订单类型">{{customerDetail.supportOrderTypesName}}</el-descriptions-item>
            <el-descriptions-item label="归属业务部门">{{customerDetail.businessDeptName}}</el-descriptions-item>
            <el-descriptions-item label="归属业务人员">{{customerDetail.businessUserName}}</el-descriptions-item>
            <el-descriptions-item label="驿站合作模式">{{customerDetail.stationCooperationModeName}}</el-descriptions-item>
            <el-descriptions-item label="驿站结算方式">{{customerDetail.stationSettlementName}}</el-descriptions-item>
            <el-descriptions-item label="手续费费率(‰)">{{customerDetail.handlingFeeRate}}</el-descriptions-item>
            <el-descriptions-item label="备注">{{customerDetail.remark}}</el-descriptions-item>
            <!-- <el-descriptions-item label=""></el-descriptions-item> -->
        </el-descriptions>
        <div style="width:100%;height:20px"></div>
        <div style="margin-bottom:16px">
            <span style="display: inline-block; font-weight: 500; color: #333333; font-size: 14px;">经营场所照片</span>
        </div>
        <div class="demo-image__preview" >
            <!-- <el-image 
                style="width: 100px; height: 100px"
                :src="url" 
                :preview-src-list="srcList">
            </el-image> -->
            <el-image
                v-for="(item,index) in imageList"  
                :key="index" 
                style="width:146px;height:146px; margin-right: 10px;"
                :src="item.url"   
                :preview-src-list="item.urlList"   
                ></el-image>
        </div>
        
        <div style="width:100%;height:22px"></div>
        <div style="margin-bottom:16px">
            <span style="display: inline-block; color: #333333; font-size: 14px;">合同信息</span>
        </div>
        <el-table 
            v-loading="loading" 
            :data="contractList"
        >
            <el-table-column type="selection" width="55" align="left" />
            <el-table-column label="合同编号" prop="code" width="120" />
            <el-table-column label="文件名称" :show-overflow-tooltip="true">
                <template slot-scope="scope">
                    <span>{{scope.row.contractFile?scope.row.contractFile.objectOriginalName:''}}</span>
                </template>
            </el-table-column>
            <el-table-column label="备注" prop="remark" :show-overflow-tooltip="true" />
            <el-table-column label="状态" align="left" prop="status" width="100">
            <template slot-scope="scope">
                <span v-if="scope.row.status == 0">无效</span>
                <span v-else>有效</span>
            </template>
            </el-table-column>
            <el-table-column label="上传人员" :show-overflow-tooltip="true" width="150">
                <template slot-scope="scope">
                    <span>{{scope.row.contractFile?scope.row.contractFile.uploadUserName:''}}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="left" class-name="small-padding fixed-width">
            <template slot-scope="scope" >
                <el-button
                size="mini"
                type="text"
                @click="handleExport(scope.row)"
                v-hasPermi="['system:role:edit']"
                >下载</el-button>
                <!-- <el-button
                size="mini"
                type="text"
                v-hasPermi="['system:role:remove']"
                >查看</el-button> -->
            </template>
            </el-table-column>
        </el-table>
    </div>
    <div class="h84_line"></div>
    <div class="bottom-btn">
        <div class="bottom-locate" >
          <el-button type="default" @click="cancel">返回</el-button>
        </div>
      </div>
  </div>
</template>

<script>
import QueryTableRender from "@/components/QueryTableRender";
import { listType, getType, delType, addType, updateType, refreshCache } from "@/api/system/dict/type";
import { listRole, } from "@/api/system/role";
import { listCustomer, getCustomer, updateCustomer, getDeptTree, getBusiness } from "@/api/basic/customer";
// import {getOrderTerminalList} from "@/api/costManagement";
// import DialogCostEdit from "@/views/costManagement/components/DialogCostEdit";
// import dayjs from "dayjs"
import { getToken } from "@/utils/auth";

export default {
  name: "CustomerManageDetail",
  dicts: ['sys_normal_disable', 'sys_user_sex', 'basic_data_customer_type', 'basic_data_customer_station_cooperation_mode', 'basic_data_customer_station_settlement'],
  components: {QueryTableRender},
  data() {
    return {
      form: {},
      queryModel:{},
      rules:{},
      deptOptions: [],
      editVisible: false,
      curRecord: null,
      customerValue: [], //  价目数据
      customerData: [],
      loading:false,
      height:200,
      contractList:[],
      url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
      srcList: [
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg'
      ],
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
      },
      dialogImageUrl: '',
      dialogVisible: false,
      imageList:[], //上传图片
      customerDetail:{},//详情获取
    }
  },
  created() {
    this.getCustomerDetail();
    console.log(this.$store.getters.level,'12321',this.$store.getters.templateId)
  },
  activated() {
    // this.tableHeight();
  },
  updated() {},
  watch: {
    $route() {
        // location.reload();
        this.getCustomerDetail();
    },
  },
  methods: {
    
    /** 获取客户详情 */
    getCustomerDetail() {
        console.log(this.$route.query.customerId)
        if(this.$route.query.customerId){
            const str = {
                customerId:JSON.parse(this.$route.query.customerId)
            }
            getCustomer(str).then(response => {
                // this.getBusinessList(response.data.businessDeptId);
                this.customerDetail = response.data;
                // this.form = response.data;
                this.contractList = response.data.basicDataCustomerContractList;
                this.imageList = response.data.businessPremisesPhotoList;
                for(let i=0;i<this.imageList.length;i++){
                    this.imageList[i].url = process.env.VUE_APP_BASE_API + '/obs/download?id=' + this.imageList[i].id
                    this.imageList[i].urlList = [process.env.VUE_APP_BASE_API + '/obs/download?id=' + this.imageList[i].id]
                }

            });
            // getDeptTree().then(response => {
            //     this.deptOptions = response.data
            // });
            console.log(this.imageList)
        }
        
    },
    /** 下载按钮操作 */
    handleExport(val) {
        console.log(val)
        const prop ={
            id:val.contractFile.id
        }
      this.downloadFile('/obs/download', prop,`${val.contractFile.objectOriginalName}`)
    },
    /** 取消 */
    cancel() {
    //   this.$router.go(-1)
      const obj = { path: "/basicData/customerManage" };
      this.$tab.closeOpenPage(obj);
    },
    /**
     * 客户分类
     * @param {*} value 
     */
    getCustomerType(value) {
      let show = '';
      this.dict.type.basic_data_customer_type.some((item) => {
        if (value == item.value) {
          show = item.label;
          return true;
        }
      });
      return show;
    },
    /**
     * 驿站合作模式
     * @param {*} value 
     */
    getStationCooperationMode(value) {
      let show = '';
      this.dict.type.basic_data_customer_station_cooperation_mode.some((item) => {
        if (value == item.value) {
          show = item.label;
          return true;
        }
      });
      return show;
    },
    /**
     * 驿站结算方式
     * @param {*} value 
     */
    getStationSettlement(value) {
      let show = '';
      this.dict.type.basic_data_customer_station_settlement.some((item) => {
        if (value == item.value) {
          show = item.label;
          return true;
        }
      });
      return show;
    },
  }
}
</script>

<style lang="scss" scoped>
.top_title {
    display: inline-block; 
    font-weight: 500; 
    color: #333333; 
    font-size: 16px;
    font-family: PingFangSC-Medium;
}
::v-deep .hasTagsView .app-main {
    overflow: auto !important;
}


</style>